<template>
  <nav>
    <div class="myNav" @click="routeMoney">
      <div to="/money" class="item" active-class="selected">
        <div>
          <svg
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            width="36px"
            height="36px"
            viewBox="0 0 24 24"
            aria-labelledby="cartIconTitle"
            stroke="#000"
            stroke-width="1.3714285714285714"
            stroke-linecap="square"
            stroke-linejoin="miter"
            fill="none"
            color="#000"
          >
            <title id="cartIconTitle">Cart</title>
            <path d="M6 6h15l-1.5 9h-12z" />
            <circle cx="9" cy="19" r="1" />
            <circle cx="18" cy="19" r="1" />
            <path d="M6 6H3" />
          </svg>
        </div>
        记账
      </div>
    </div>
    <div class="myNav" @click="routeLabels">
      <div to="/labels" class="item" active-class="selected">
        <div>
          <svg
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            width="36px"
            height="36px"
            viewBox="0 0 24 24"
            aria-labelledby="dashboardIconTitle"
            stroke="#000"
            stroke-width="1.3714285714285714"
            stroke-linecap="square"
            stroke-linejoin="miter"
            fill="none"
            color="#000"
          >
            <title id="dashboardIconTitle">Dashboard</title>
            <rect width="20" height="20" x="2" y="2" />
            <path d="M11 7L17 7M11 12L17 12M11 17L17 17" />
            <line x1="7" y1="7" x2="7" y2="7" />
            <line x1="7" y1="12" x2="7" y2="12" />
            <line x1="7" y1="17" x2="7" y2="17" />
          </svg>
        </div>
        标签
      </div>
    </div>
    <div class="myNav" @click="routeStatistics">
      <div to="/statistics" class="item" active-class="selected">
        <div>
          <svg
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            width="36px"
            height="36px"
            viewBox="0 0 24 24"
            aria-labelledby="chartIconTitle"
            stroke="#000"
            stroke-width="1.3714285714285714"
            stroke-linecap="square"
            stroke-linejoin="miter"
            fill="none"
            color="#000"
          >
            <title id="chartIconTitle">Chart</title>
            <polygon points="2 12 2 21 6 21 6 12" />
            <polygon points="18 7 18 21 22 21 22 7" />
            <polygon points="10 3 10 21 14 21 14 3" />
          </svg>
        </div>
        统计
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
// 引入组合是API对应的编程式导航hooks

import { useRouter } from "vue-router";
const router = useRouter();
//下面都是编程式导航方法
const routeMoney = (): void => {
  router.push("/money");
};
const routeLabels = (): void => {
  router.push("/labels");
};
const routeStatistics = (): void => {
  router.push("/statistics/input");
};
</script>

<style lang="less" scoped>
nav {
  background-color: rgb(151, 165, 175);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  font-size: 20px;
  color: rgb(6, 7, 7);
  height: 10vh;
  border-radius: 0px 0px 35px 35px;

  .myNav {
    // padding: 0px 50px;
    // margin: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;

    // flex: 1;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0%;
    // background-color: #fff;
    // border: 1px solid red;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .active {
    color: rgb(226, 87, 87);
  }
}
</style>
